import React from 'react'
import { withRouter } from 'react-router-dom'

import { Flex } from 'antd-mobile'

import classNames from 'classnames'
import styles from './index.module.scss'

function SearchHeader(props) {
  return (
    <Flex
      className={classNames(styles.searchBar, {
        [props.className]: !!props.className
      })}
    >
      <Flex className={styles.searchLeft}>
        <div onClick={() => props.history.push('/citylist')}>
          <span>{props.cityName}</span>
          <i className="iconfont icon-arrow"></i>
        </div>
        <div className={styles.searchForm}>
          <i className="iconfont icon-seach"></i>
          <span className={styles.formColor}>请输入小区或地址</span>
        </div>
      </Flex>
      <i className="iconfont icon-map" onClick={() => props.history.push('/map')}
      ></i>
    </Flex>
  )
}
export default withRouter(SearchHeader)
